<template>
  <header class="app-header">
    <h1 class="system-name">企业内部培训系统</h1>
    
    <div class="header-right">  
      <!-- 已登录状态 -->
      <el-dropdown v-if="authStore.isAuthenticated()" class="user-dropdown">
        <span class="el-dropdown-link">
          <el-avatar :size="32" :src="userAvatar" @error="handleAvatarError">
            <img :src="defaultAvatar" />
          </el-avatar>
          <span class="username">{{ authStore.userInfo?.username || '用户' }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleProfile">
              <el-icon><User /></el-icon>个人中心
            </el-dropdown-item>
            <el-dropdown-item divided @click="handleLogout">
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      
      <!-- 未登录状态 -->
      <div v-else class="default-avatar" @click="goToLogin">
        <el-avatar :size="32" :src="defaultAvatar" />
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { User, SwitchButton } from '@element-plus/icons-vue'
import defaultAvatarImg from '@/assets/logo.png'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const defaultAvatar = ref(defaultAvatarImg)
const avatarError = ref(false)

// 计算用户头像
const userAvatar = computed(() => {
  if (avatarError.value || !authStore.userInfo?.avatar) {
    return defaultAvatar.value
  }
  return authStore.userInfo.avatar
})

// 头像加载失败处理
const handleAvatarError = () => {
  avatarError.value = true
}

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}

// 处理个人中心
const handleProfile = () => {
  if (authStore.userType === 'teacher') {
    router.push(`/teacher/${authStore.userId}/detail`)
  } else {
    router.push(`/student/${authStore.userId}/profile`)
  }
}

// 处理退出登录
const handleLogout = async () => {
  try {
    await authStore.logout()
    ElMessage.success('退出登录成功')
  } catch (error) {
    ElMessage.error('退出登录失败: ' + error.message)
  }
}
</script>

<style scoped>
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 70px;
  background-color: #409EFF;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.system-name {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-dropdown {
  cursor: pointer;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  color: white;
  font-weight: 500;
}

.default-avatar {
  cursor: pointer;
  transition: transform 0.2s;
}

.default-avatar:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .app-header {
    padding: 0 15px;
  }
  
  .system-name {
    font-size: 20px;
  }
  
  .username {
    display: none;
  }
}
</style>